<template>
    <div>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="所属项目" class="input">
                        <el-input size="small" :value="caseArr.project.title" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="样 本 点" class="input">
                        <el-input size="small" :value="caseArr.sample.name" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="指标" class="input">
                        <span v-if="caseArr.sample.targets.length > 0">
                            <el-input size="small" :value="caseArr.sample.targets[0].name"
                                      disabled></el-input></span>
                        <span v-else><el-input size="small" value="暂未分配" disabled></el-input></span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属社区" class="input">
                        <span v-if="caseArr.sample.communities.length > 0">
                            <el-input size="small" :value="caseArr.sample.communities[0].name"
                                      disabled></el-input></span>
                        <span v-else><el-input size="small" value="暂未分配" disabled></el-input></span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="复查状态" class="input">
                        <span v-if="caseArr.review_status === 2">
                              <el-input size="small" value="已复查" disabled></el-input>
                        </span>
                        <span v-else><el-input size="small" value="暂未复查" disabled></el-input></span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="复 查 人" class="input">
                        <el-input size="small" :value="caseArr.user !== null ? caseArr.user.username : '暂未复查'" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="案件描述" class="input">
                        <el-input size="small" :value="caseArr.remark" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="案件图片">
                        <el-image
                                :src="caseArr.syncUrl"
                                :preview-src-list="caseArr.syncImg">
                        </el-image>

                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="复查图片">
                        <div style="display: flex;flex-direction: row!important; ">
                            <div style="display: flex;"  v-for="(item,index) in caseArr.review_img" :key="index">
                                <el-image
                                        :src="item.img_path"
                                        :preview-src-list="caseArr.new_path">
                                </el-image>
                            </div>
                           
                        </div>
                        
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-show="caseArr.desc">
                    <el-form-item label="补充说明">
                        <el-input size="small" :value="caseArr.desc" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="审核结果" prop="audit_result">
                        <el-select v-model="ruleForm.audit_result" size="small" style="width: 100%" clearable @change="selectChange"
                                   placeholder="请输入审核状态">
                            <el-option v-show="index!==0"
                                       v-for="(item,index) in auditResult"
                                       :key="index"
                                       :label="item"
                                       :value="index">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-show="noHg">
                    <el-form-item label="拒绝理由">
                        <el-input size="small" type="textarea"
                                  :rows="2"  v-model="ruleForm.unReason"  placeholder="请输入不合格理由"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button size="small" type="primary" @click="submitForm('ruleForm')">审核</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "index",
    props: {
        caseArr: {
            type: [String, Object, Array],
            default: ``
        },
        auditResult: {
            type: [String, Object, Array],
            default: ``
        },
        unReasonShow:{
            type:Boolean,
            default: false
        }
    },
    data() {
        return {
            ruleForm: {
                audit_result: '',
                unReason:''
            },
            rules: {
                audit_result: [
                    {required: true, message: '请选择审核结果', trigger: 'change'}
                ]
            },
            noHg:this.unReasonShow
        }
    },
    created() {
        console.log(this.unReasonShow)
    },
    methods: {
        //审核结果
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (!valid) return this.$message.error('输入不合法')
                this.$emit('saveAuditResult', this.ruleForm)
            })
        },
        clearForm() {
            this.$refs['ruleForm'].resetFields();
        },
        selectChange(e){
         
            if(e === 4){
                this.noHg = true
            }else{
                this.ruleForm.unReason = ''
                this.noHg = false
            }
        }
    }
}
</script>

<style scoped>
.input >>> .is-disabled .el-input__inner {
    background-color: white;
    color: #101117 !important;
}
</style>
